svg {
    cursor: pointer;
    width: 100%
}

@media (max-width: 500px) {
    svg {
        height:250px
    }
}

@media (max-width: 420px) {
    svg {
        height:200px
    }
}

svg path {
    fill: #00306A;
    fill-opacity: 0;
    stroke: #00306A
}

svg#icon1 {
    -webkit-transition: transform 0.5s;
    -khtml-transition: transform 0.5s;
    -moz-transition: transform 0.5s;
    -ms-transition: transform 0.5s;
    -o-transition: transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: rotate(0) translate(0,0);
    -khtml-transform: rotate(0) translate(0,0);
    -moz-transform: rotate(0) translate(0,0);
    -ms-transform: rotate(0) translate(0,0);
    -o-transform: rotate(0) translate(0,0);
    transform: rotate(0) translate(0,0);
    -webkit-transform-origin: 255px 164px;
    -khtml-transform-origin: 255px 164px;
    -moz-transform-origin: 255px 164px;
    -ms-transform-origin: 255px 164px;
    -o-transform-origin: 255px 164px;
    transform-origin: 255px 164px
}

svg#icon1 #wheel1 {
    -webkit-transform-origin: 255px 140px;
    -khtml-transform-origin: 255px 140px;
    -moz-transform-origin: 255px 140px;
    -ms-transform-origin: 255px 140px;
    -o-transform-origin: 255px 140px;
    transform-origin: 255px 140px
}

svg#icon1 #wheel2 {
    -webkit-transform-origin: 78px 137px;
    -khtml-transform-origin: 78px 137px;
    -moz-transform-origin: 78px 137px;
    -ms-transform-origin: 78px 137px;
    -o-transform-origin: 78px 137px;
    transform-origin: 78px 137px
}

svg#icon1:hover {
    -webkit-transform: rotate(10deg) translate(-20px,0);
    -khtml-transform: rotate(10deg) translate(-20px,0);
    -moz-transform: rotate(10deg) translate(-20px,0);
    -ms-transform: rotate(10deg) translate(-20px,0);
    -o-transform: rotate(10deg) translate(-20px,0);
    transform: rotate(10deg) translate(-20px,0)
}

svg#icon1:hover #wheel2,svg#icon1:hover #wheel1 {
    -webkit-animation-name: spin;
    -khtml-animation-name: spin;
    -moz-animation-name: spin;
    -ms-animation-name: spin;
    -o-animation-name: spin;
    animation-name: spin;
    -webkit-animation-duration: 0.5s;
    -khtml-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    -ms-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    -khtml-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -khtml-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear
}

svg#icon2 {
    -webkit-transition: transform 0.5s;
    -khtml-transition: transform 0.5s;
    -moz-transition: transform 0.5s;
    -ms-transition: transform 0.5s;
    -o-transition: transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: rotate(0);
    -khtml-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0)
}

svg#icon2 #screw_1 {
    width: 120px;
    overflow: hidden
}

svg#icon2:hover {
    -webkit-animation-name: drill;
    -khtml-animation-name: drill;
    -moz-animation-name: drill;
    -ms-animation-name: drill;
    -o-animation-name: drill;
    animation-name: drill;
    -webkit-animation-duration: 1s;
    -khtml-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -khtml-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

svg#icon2:hover #screw_1_1,svg#icon2:hover #screw_1_2,svg#icon2:hover #screw_1_3 {
    -webkit-animation-name: screwmove;
    -khtml-animation-name: screwmove;
    -moz-animation-name: screwmove;
    -ms-animation-name: screwmove;
    -o-animation-name: screwmove;
    animation-name: screwmove;
    -webkit-animation-duration: 0.9s;
    -khtml-animation-duration: 0.9s;
    -moz-animation-duration: 0.9s;
    -ms-animation-duration: 0.9s;
    -o-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-animation-iteration-count: infinite;
    -khtml-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

svg#icon2:hover #screw_1_1 {
    -webkit-animation-delay: 0s;
    -khtml-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -ms-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s
}

svg#icon2:hover #screw_1_2 {
    -webkit-animation-delay: 0.3s;
    -khtml-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -ms-animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    animation-delay: 0.3s
}

svg#icon2:hover #screw_1_3 {
    -webkit-animation-delay: 0.6s;
    -khtml-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    -ms-animation-delay: 0.6s;
    -o-animation-delay: 0.6s;
    animation-delay: 0.6s
}

svg#icon3:hover {
    -webkit-animation-name: shake;
    -khtml-animation-name: shake;
    -moz-animation-name: shake;
    -ms-animation-name: shake;
    -o-animation-name: shake;
    animation-name: shake;
    -webkit-animation-duration: 0.5s;
    -khtml-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    -ms-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    -khtml-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -khtml-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear
}

svg#icon4 {
    -webkit-transition: transform 0.5s;
    -khtml-transition: transform 0.5s;
    -moz-transition: transform 0.5s;
    -ms-transition: transform 0.5s;
    -o-transition: transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: scalse(1);
    -khtml-transform: scalse(1);
    -moz-transform: scalse(1);
    -ms-transform: scalse(1);
    -o-transform: scalse(1);
    transform: scalse(1)
}

svg#icon4 #back {
    display: none
}

svg#icon4 #text {
    -webkit-transition: opacity 0.5s;
    -khtml-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    -ms-opacity: 0;
    -o-opacity: 0;
    opacity: 0
}

svg#icon4 #text [id*='letter'] {
    -webkit-transition: all 0.5s;
    -khtml-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    -ms-opacity: 0;
    -o-opacity: 0;
    opacity: 0
}

svg#icon4 #text [id*='letter']#letter_6_ {
    -webkit-transition-delay: 0s;
    -khtml-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s
}

svg#icon4 #text [id*='letter']#letter_5_ {
    -webkit-transition-delay: 0.2s;
    -khtml-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s
}

svg#icon4 #text [id*='letter']#letter_4_ {
    -webkit-transition-delay: 0.4s;
    -khtml-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -ms-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s
}

svg#icon4 #text [id*='letter']#letter_3_ {
    -webkit-transition-delay: 0.6s;
    -khtml-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -ms-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s
}

svg#icon4 #text [id*='letter']#letter_2_ {
    -webkit-transition-delay: 0.8s;
    -khtml-transition-delay: 0.8s;
    -moz-transition-delay: 0.8s;
    -ms-transition-delay: 0.8s;
    -o-transition-delay: 0.8s;
    transition-delay: 0.8s
}

svg#icon4 #text [id*='letter']#letter_1_ {
    -webkit-transition-delay: 1s;
    -khtml-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -ms-transition-delay: 1s;
    -o-transition-delay: 1s;
    transition-delay: 1s
}

svg#icon4 #text [id*='letter']#letter {
    -webkit-transition-delay: 1.2s;
    -khtml-transition-delay: 1.2s;
    -moz-transition-delay: 1.2s;
    -ms-transition-delay: 1.2s;
    -o-transition-delay: 1.2s;
    transition-delay: 1.2s
}

svg#icon4 #text [id*='letter']#letter_7_ {
    -webkit-transition-delay: 1.4s;
    -khtml-transition-delay: 1.4s;
    -moz-transition-delay: 1.4s;
    -ms-transition-delay: 1.4s;
    -o-transition-delay: 1.4s;
    transition-delay: 1.4s
}

svg#icon4 #screen {
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    -ms-opacity: 0;
    -o-opacity: 0;
    opacity: 0
}

svg#icon4:hover {
    -webkit-transform: scale(1.2);
    -khtml-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2)
}

svg#icon4:hover #screen {
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-opacity: 1;
    -khtml-opacity: 1;
    -moz-opacity: 1;
    -ms-opacity: 1;
    -o-opacity: 1;
    opacity: 1
}

svg#icon4:hover #text {
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-opacity: 1;
    -khtml-opacity: 1;
    -moz-opacity: 1;
    -ms-opacity: 1;
    -o-opacity: 1;
    opacity: 1
}

svg#icon4:hover #text [id*='letter'] {
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-opacity: 1;
    -khtml-opacity: 1;
    -moz-opacity: 1;
    -ms-opacity: 1;
    -o-opacity: 1;
    opacity: 1
}

svg#icon4:hover #text [id*='letter']#letter_7_ {
    -webkit-animation-name: typing;
    -khtml-animation-name: typing;
    -moz-animation-name: typing;
    -ms-animation-name: typing;
    -o-animation-name: typing;
    animation-name: typing;
    -webkit-animation-duration: 0.5s;
    -khtml-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    -ms-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    -khtml-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -khtml-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear
}

.draw-on {
    stroke-width: 1;
    stroke-dasharray: 1900;
    stroke-dashoffset: 1900;
    -webkit-animation-name: draw;
    -khtml-animation-name: draw;
    -moz-animation-name: draw;
    -ms-animation-name: draw;
    -o-animation-name: draw;
    animation-name: draw;
    -webkit-animation-duration: 4s;
    -khtml-animation-duration: 4s;
    -moz-animation-duration: 4s;
    -ms-animation-duration: 4s;
    -o-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-iteration-count: 1;
    -khtml-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -ms-animation-iteration-count: 1;
    -o-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-delay: 1s;
    -khtml-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -ms-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-fill-mode: forwards;
    -khtml-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
    -khtml-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear
}

.draw-off {
    stroke-width: 0;
    fill-opacity: 1;
    stroke-dasharray: 0;
    stroke-dashoffset: 0
}

.notSupport {
    fill-opacity: 1;
    stroke-width: 0
}

@keyframes typing {
    0% {
        filter: alpha(opacity=0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        -webkit-opacity: 0;
        -khtml-opacity: 0;
        -moz-opacity: 0;
        -ms-opacity: 0;
        -o-opacity: 0;
        opacity: 0
    }

    100% {
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-opacity: 1;
        -khtml-opacity: 1;
        -moz-opacity: 1;
        -ms-opacity: 1;
        -o-opacity: 1;
        opacity: 1
    }
}

@keyframes drill {
    0% {
        -webkit-transform: translateX(0);
        -khtml-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }

    50% {
        -webkit-transform: translateX(20px);
        -khtml-transform: translateX(20px);
        -moz-transform: translateX(20px);
        -ms-transform: translateX(20px);
        -o-transform: translateX(20px);
        transform: translateX(20px)
    }

    100% {
        -webkit-transform: translateX(0);
        -khtml-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes shake {
    0% {
        -webkit-transform: rotate(0);
        -khtml-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0)
    }

    25% {
        -webkit-transform: rotate(10deg);
        -khtml-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        transform: rotate(10deg)
    }

    50% {
        -webkit-transform: rotate(0deg);
        -khtml-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    75% {
        -webkit-transform: rotate(-10deg);
        -khtml-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
        -o-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    100% {
        -webkit-transform: rotate(0deg);
        -khtml-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes screwmove {
    0% {
        filter: alpha(opacity=0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        -webkit-opacity: 0;
        -khtml-opacity: 0;
        -moz-opacity: 0;
        -ms-opacity: 0;
        -o-opacity: 0;
        opacity: 0
    }

    100% {
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-opacity: 1;
        -khtml-opacity: 1;
        -moz-opacity: 1;
        -ms-opacity: 1;
        -o-opacity: 1;
        opacity: 1
    }
}

@keyframes draw {
    90% {
        stroke-dashoffset: 0;
        fill-opacity: 0;
        stroke-width: 1
    }

    100% {
        stroke-width: 0;
        fill-opacity: 1
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -khtml-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        stroke-width: 0;
        fill-opacity: 1;
        -webkit-transform: rotate(-360deg);
        -khtml-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg)
    }
}

@keyframes colorChange {
    0% {
        fill: #000000
    }

    100% {
        fill: #cccccc
    }
}